<template>
  <div class="ranking-list" v-if="Object.keys(item).length > 0">
    <div class="header">
      <div class="image">
        <img :src="formatImageSize(item.coverImgUrl,)" alt="">
        <a href="javascript:;" class="image_cover"></a>
      </div>

      <div class="info">
        <a href="javascript:;">{{ item.name }}</a>
        <div>
          <button class="btn play sprite_02"></button>
          <button class="btn favor sprite_02"></button>
        </div>
      </div>
    </div>

    <div class="list">
      <template
        v-for="(iten, index) in item.tracks.slice(0, 10)"
        :key="iten.id"
      >
        <div class="list-item">
          <div class="rank">{{ index + 1}}</div>
          <div class="info">
            <span class="name text-nowrap">{{ iten.name }}</span>
            <div class="operate">
              <button class="btn play sprite_02" @click="playMusic(iten.id)"></button>
              <button class="btn add sprite_icon2"></button>
              <button class="btn favor sprite_02"></button>
            </div>
          </div>
        </div>
      </template>
    </div>

    <div class="footer">
      <a href="">查看全部</a>
    </div>

  </div>
</template>

<script lang="ts" setup>
  import { defineProps } from "vue";
  import { useStore } from "@/store";

  import { formatImageSize } from "@/utils/format-utils";

  const store = useStore();

  defineProps({
    item: {
      type: Object,
      default: () => ({})
    }
  });

  const playMusic = (id) => {
    store.dispatch("player/getSongDetailAction", id);
  }
</script>

<style lang="less" scoped>
@import './index.less';
</style>
